<template>
	<MobileSimulation ref="MobileSimulation">
		上
		<Button @click="normal('top')" style="margin:10px 5px 0;">normal</Button>
		<Button @click="loading('top')" style="margin:10px 5px 0;">loading</Button>
		<Button @click="success('top')" style="margin:10px 5px 0;">success</Button>
		<Button @click="fail('top')" style="margin:10px 5px 0;">fail</Button>
		<br/>
		中
		<Button @click="normal('center')" style="margin:10px 5px 0;">normal</Button>
		<Button @click="loading('center')" style="margin:10px 5px 0;">loading</Button>
		<Button @click="success('center')" style="margin:10px 5px 0;">success</Button>
		<Button @click="fail('center')" style="margin:10px 5px 0;">fail</Button>
		<br/>
		下
		<Button @click="normal('bottom')" style="margin:10px 5px 0;">normal</Button>
		<Button @click="loading('bottom')" style="margin:10px 5px 0;">loading</Button>
		<Button @click="success('bottom')" style="margin:10px 5px 0;">success</Button>
		<Button @click="fail('bottom')" style="margin:10px 5px 0;">fail</Button>
		<br/>
		<Checkbox v-model="overlay" label="overlay" style="margin:10px 10px 0;"/>
		<br/>
		<Checkbox v-model="closeOnClick" label="closeOnClick" style="margin:10px 10px 0;"/>
		<br/>
		<Checkbox v-model="closeOnClickOverlay" label="closeOnClickOverlay" style="margin:10px 10px 0;"/>
	</MobileSimulation>
</template>

<script>
import MobileSimulation from '../../../components/MobileSimulation';
import Toast,{rootContainerVue} from '@/components/app/toast';
import Button from '@/components/app/button';
import Checkbox from '@/components/app/checkbox';
window.Toast=Toast;
export default {
	name:'index',
	components:{
		MobileSimulation,
		Button,
		Checkbox,
	},
	data(){
		return {
			overlay:false,
			closeOnClick:false,
			closeOnClickOverlay:false,
		};
	},
	computed:{
	},
	created(){
		this.$nextTick(function(){
			this.$refs.MobileSimulation.ready.then((doc) => {
				doc.body.append(rootContainerVue.$el);
			});
		});
	},
	methods:{
		normal(position){
			Toast.normal({
				message:'提示信息提示信\n息提示信息提示信息提示信息提示信息提示信息提示信息',
				overlay:this.overlay,
				closeOnClick:this.closeOnClick,
				closeOnClickOverlay:this.closeOnClickOverlay,
				position,
			}).then(() => {
				console.log('关闭normal');
			});
		},
		loading(position){
			const t=Toast.loading({
				message:'提示信息提示信\n息提示信息提示信息提示信息提示信息提示信息提示信息',
				overlay:this.overlay,
				closeOnClick:this.closeOnClick,
				closeOnClickOverlay:this.closeOnClickOverlay,
				position,
			});
			t.then(() => {
				console.log('关闭loading');
			});
			setTimeout(t.close,2000);
		},
		success(position){
			Toast.success({
				message:'提示信息提示信\n息提示信息提示信息提示信息提示信息提示信息提示信息',
				overlay:this.overlay,
				closeOnClick:this.closeOnClick,
				closeOnClickOverlay:this.closeOnClickOverlay,
				position,
			}).then(() => {
				console.log('关闭success');
			});
		},
		fail(position){
			Toast.fail({
				message:'提示信息提示信\n息提示信息提示信息提示信息提示信息提示信息提示信息',
				overlay:this.overlay,
				closeOnClick:this.closeOnClick,
				closeOnClickOverlay:this.closeOnClickOverlay,
				position,
			}).then(() => {
				console.log('关闭fail');
			});
		},
	}
};
</script>

<style lang="scss">
</style>
